<template>
  <el-pagination
    :hide-on-single-page="hidden"
    :background="background"
    :current-page.sync="currentPage"
    :page-size.sync="pageSize"
    :layout="layout"
    :page-sizes="pageSizes"
    :total="total"
    v-bind="$attrs"
    align="center"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>
<script>
  export default {
    name: "Pagination",
    props: {
      total: {
        required: true,
        type: Number
      },
      page: {
        type: Number,
        default: 1
      },
      limit: {
        type: Number,
        default: 10
      },
      pageSizes: {
        type: Array,
        default() {
          return [10, 20, 30, 50];
        }
      },
      layout: {
        type: String,
        default: "total, sizes, prev, pager, next, jumper"
      },
      background: {
        type: Boolean,
        default: true
      },
      hidden: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      currentPage: {
        get() {
          return this.page;
        },
        set(val) {
          this.$emit("update:page", val);
        }
      },
      pageSize: {
        get() {
          return this.limit;
        },
        set(val) {
          console.log(val);
          this.$emit("update:limit", val);
        }
      }
    },
    methods: {
      // 每页条数发生变化时
      handleSizeChange(val) {
        this.$emit("pagination", { page: this.currentPage, limit: val });
      },

      // 当前页数发生变化时
      handleCurrentChange(val) {
        this.$emit("pagination", { page: val, limit: this.pageSize });
      }
    }
  };
</script>
